<script src="https://unpkg.com/deeplearn"></script>
<script src="dist/bundle.js"></script>

<img id="cat"></img>
<div id="result"></div>

<script>
  const cat = document.getElementById('cat');
  cat.onload = async () => {
    const resultElement = document.getElementById('result');

    resultElement.innerText = 'Loading mobilenet...';

    const math = dl.ENV.math;
    const mobileNet = new mobilenet.MobileNet(math);
    await mobileNet.load();

    resultElement.innerText = 'Predicting...';

    const pixels = dl.Array3D.fromPixels(cat);

    const result = await mobileNet.predict(pixels);

    resultElement.innerText = '';

    const topK = await mobileNet.getTopKClasses(result, 5);
    for (const key in topK) {
      resultElement.innerText += `${topK[key].toFixed(5)}: ${key}\n`;
    };
  };
  cat.src = 'elephant.jpg';
</script>
